<template>
  <div>
    <van-collapse  v-model="activeName">
      <van-collapse-item title="未完成" name="1">
        <div class="q1" v-for="(item,index) in $store.state.todolist" :key="index" v-show="item.state==0">
          <input type="checkbox" @click="change(index)" :checked="item.state!==0" />
          <span>{{item.title}}</span>
          <van-button type="info" class="btn" @click="cancel(index)">取消</van-button>
        </div>
      </van-collapse-item>
      <van-collapse-item title="已完成" name="2">
        <div class="q1" v-for="(item,index) in $store.state.todolist" :key="index" v-show="item.state==1">
          <input type="checkbox" @click="change(index)" :checked="item.state == 1" />
          <span>{{ item.title }}</span>
          <span>{{ item.time }}</span>
        </div>
      </van-collapse-item>
      <van-collapse-item title="已取消" name="3">
        <div class="q1" v-for="(item, index) in $store.state.todolist" :key="index" v-show="item.state == 2">
          <s>{{ item.title }}</s>
          <van-button type="info" class="btn" @click="cancel(index)">恢复</van-button>
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: ["1"],
    };
  },
  methods: {
    change(index) {
      this.$store.commit("change", index);
    },
    cancel(index) {
      this.$store.commit("cancel", index);
    },
  },
};
</script>
<style scoped>
.btn {
  margin-left: 30px;
}
.q1{
  display: flex;
  justify-content: space-between;
}
</style>